<div ng-if="tab === 'welcome'">
    <div layout="column" layout-align="start stretch" ng-show="!load && !agent">
        <div layout="row" class="layout-padding">
            <div class="euiPanel euiFlexItem wz-margin-10" flex class="wz-md-card" flex>
                <md-card-content class="wz-text-center">
                    <div layout="row" layout-padding>
                        <i class="fa fa-fw fa-info-circle" aria-hidden="true"></i> <span
                            class="embPanel__header embPanel__title embPanel__dragger layout-row wz-headline-title">Could
                            not fetch data for this agent. <span ng-if="emptyAgent">Reason: {{emptyAgent}}</span></span>
                    </div>
                    <div layout="row" layout-padding ng-if="emptyAgent">
                        <span class="cursor-pointer" ng-click="getAgent()"><i class="fa fa-fw fa-refresh"
                                aria-hidden="true"></i>
                            Try again</span>
                    </div>
                </md-card-content>
            </div>
        </div>
    </div>
    <div ng-show="!load && agent">
        <div ng-if="welcomeCardsProps">
            <react-component name="AgentsWelcome" props="getWelcomeCardsProps(resultState)" ></react-component>
        </div>
    </div>
</div>